<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

       .right-container {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        /* 搜索框样式 */
       .search-input {
            color: gray;
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
            border: none;
            width: 150px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

       .a {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 纵向元素样式（高度调整为140px） */
       .left-section .element {
            width: 200px;
            height: 140px;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            background-color: transparent; /* 初始透明背景 */
            transition: all 0.3s ease; /* 添加过渡效果 */
        }

        /* 横向元素样式（无边框） */
       .container .element {
            width: 200px;
            height: 100px;
            padding: 10px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            border: none;
        }

       .container {
            display: flex;
            justify-content: space-between;/*子元素之间的空白区域均匀分布*/
            flex-grow: 1;
        }

       .photo {
            width: 200px;
            height: 100px;
            background-color: #ddd;
            margin-right: 20px;
            background-image: url('图片库/logo.png');
            background-size: 100% 100%;
            background-position: center;
        }

       .b {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
        }

        /* 新增布局容器样式 */
       .content-container {
            display: flex;
            height: 100%;
            position: relative;
        }

       .left-section {
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;/*设置层叠顺序，数值越高越在上方，解决元素重叠时的显示层级。*/
        }

       .right-image-section {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;/*相对定位，保留原文档流位置，可配合偏移属性*/
        }

        /* 背景图改为绝对定位占满空间 */
       .background-image-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

       .full-image {
            width: 100%;
            height: 100%;
            object-fit: cover;/* 针对图片等替换元素，保持比例缩放，完全覆盖容器，裁剪超出容器范围的部分 */
            display: block;/*设为块级元素，独占一行，能设置宽高*/
        }

        /* 登录弹窗样式 */
        .login-modal {
    display: none; /* 初始隐藏模态框，需通过 JavaScript 控制显示/隐藏 */
    position: fixed; /* 固定定位，相对于视口定位，滚动页面时位置不变 */
    top: 0; /* 模态框上边缘与视口顶部对齐 */
    left: 0; /* 模态框左边缘与视口左侧对齐 */
    width: 100%; /* 宽度覆盖整个视口 */
    height: 100%; /* 高度覆盖整个视口 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，形成遮罩效果 */
    justify-content: center; /* 弹性容器主轴（水平）居中对齐子元素 */
    align-items: center; /* 弹性容器交叉轴（垂直）居中对齐子元素 */
}

.login-content {
    background-color: white; /* 白色背景，与遮罩层形成对比 */
    padding: 20px; /* 内容与边框的间距为 20px */
    border-radius: 5px; /* 圆角边框，提升视觉效果 */
    width: 300px; /* 固定宽度，控制模态框大小 */
    display: flex; /* 弹性容器，使子元素可弹性排列 */
    flex-direction: column; /* 子元素垂直排列，从上到下 */
    align-items: center; /* 子元素在交叉轴（水平）居中对齐 */
    justify-content: center; /* 子元素在主轴（垂直）居中对齐 */
}

        .close {
    position: absolute; /* 元素脱离文档流，相对于最近的已定位祖先元素定位（无则相对于视口） */
    top: 10px; /* 元素上边缘距离定位参考对象的上边缘 10px */
    right: 10px; /* 元素右边缘距离定位参考对象的右边缘 10px */
    cursor: pointer; /* 鼠标悬停时显示为指针样式，提示可点击 */
}

        /* 登录表单元素样式 */
       .login-content form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

       .login-content form label,
       .login-content form input {
            margin: 10px;
        }

        /* 登录按钮样式 */
       .login-content input[type="submit"] {
            background-color: lightblue;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }

        /* 鼠标悬停时登录按钮变红 */
       .login-content input[type="submit"]:hover {
            background-color: red;
        }

        /* 纵向元素悬停整体变黄效果 */
       .left-section .element:hover {
            background-color: yellow; /* 背景色变黄 */
            color: black; /* 文字颜色调整 */
            border-color: transparent; /* 可选：隐藏边框 */
        }
    </style>
</head>

<body>
    <div class="right-container">
        <input type="text" class="search-input" placeholder="搜一搜">
        <div class="a" id="login-btn">登录</div>
    </div>
    <div class="container">
        <div class="photo"></div>
        <div class="element">首页</div>
        <div class="element">生鲜</div>
        <div class="element">电器</div>
        <div class="element">洗护</div>
        <div class="element">服装</div>
    </div>
    <div class="b">
        <div class="content-container">
            <!-- 背景图容器 -->
            <div class="background-image-container">
                <img src="图片库/背景.png" alt="" class="full-image">
            </div>
            <div class="left-section">
                <div class="element" id="element1">生鲜 水果</div>
                <div class="element" id="element2">电器 床品</div>
                <div class="element" id="element3">洗护 洗发</div>
                <div class="element" id="element4">服装 长裤</div>
                <div class="element" id="element5">杂货 户外</div>
            </div>
        </div>
    </div>

    <!-- 登录弹窗 -->
    <div class="login-modal" id="login-modal">
        <div class="login-content">
            <span class="close" id="close-btn">&times;</span>
            <h2>登录</h2>
            <form>
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
                <input type="submit" value="登录">
            </form>
        </div>
    </div>

    <script>
        const loginBtn = document.getElementById('login-btn');
        const closeBtn = document.getElementById('close-btn');
        const loginModal = document.getElementById('login-modal');

        loginBtn.addEventListener('click', function () {
            loginModal.style.display = 'flex';
        });

        closeBtn.addEventListener('click', function () {
            loginModal.style.display = 'none';
        });

        window.addEventListener('click', function (event) {
            if (event.target === loginModal) {
                loginModal.style.display = 'none';
            }
        });
    </script>
</body>

</html>